<script setup lang="ts">
withDefaults(defineProps<{
  title: string
  subtitle?: string
  ctaText?: string
  ctaTo?: string
}>(), {
  subtitle: '整线设备 · 高速互联 · 智能制造',
  ctaText: '获取解决方案',
  ctaTo: '/contact',
})
</script>

<template>
  <section class="pb-10 pt-10 lg:pt-20 md:pt-16">
    <div class="container gap-8 grid items-center md:grid-cols-2">
      <div class="reveal animate-fade-up">
        <h1 class="text-3xl leading-tight font-800 mb-4 md:text-5xl">
          {{ title }}
        </h1>
        <p class="text-base mb-6 opacity-90 md:text-lg">
          {{ subtitle }}
        </p>
        <div class="flex gap-3 items-center">
          <NuxtLink :to="ctaTo" class="btn">
            {{ ctaText }} <i class="i-heroicons-arrow-right ml-1" />
          </NuxtLink>
          <NuxtLink to="/products" class="px-4 py-2 border border-white/20 rounded-2xl">
            查看产品
          </NuxtLink>
        </div>
      </div>
      <div class="reveal animate-fade-up">
        <div class="bg-gradient-to-br from-brand/20 to-primary/20 rounded-3xl h-56 shadow-inner lg:h-96 md:h-72" />
      </div>
    </div>
  </section>
</template>
